﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div id="sales-analysis"></div>
    <div class="chart-content">
      <div class="filter-title">
        <div></div>
        <div class="filter-right">
          <el-button type="primary"
                     @click="handleSelect">筛选</el-button>
          <el-button type="primary">导出</el-button>
        </div>
      </div>
      <div v-show="showSearchItem"
           class="filter-container">
        <el-form>
          <el-form-item>
            <el-select v-model="listQuery.admin_region_name"
                       clearable
                       style="width: 160px; height:32px"
                       class="filter-item"
                       :placeholder="$t('region.districtsName')">
              <el-option v-for="item in districtsOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="chart-list">
        <el-table :key="tableKey"
                  v-loading="listLoading"
                  :data="list"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255,255,255,0.2)"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%min-height:1000px">
          <el-table-column fixed="left"
                           align="center"
                           :label="$t('table.id')"
                           width="65">
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('goods.code_2')">
            <template slot-scope="scope">
              <span>{{ scope.row.goods_code }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('goods.name_1')">
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(5)">
            <template slot-scope="scope">
              <span>{{ scope.row[5] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(4)">
            <template slot-scope="scope">
              <span>{{ scope.row[4] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(3)">
            <template slot-scope="scope">
              <span>{{ scope.row[3] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(2)">
            <template slot-scope="scope">
              <span>{{ scope.row[2] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(1)">
            <template slot-scope="scope">
              <span>{{ scope.row[1] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(0)">
            <template slot-scope="scope">
              <span>{{ scope.row[0] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination background
                       :current-page="listQuery.page"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>
      <!-- 编辑 -->
      <el-dialog :title="textMap[dialogStatus]"
                 :visible.sync="dialogFormVisible">
        <el-form ref="dataForm"
                 label-position="right"
                 label-width="30%"
                 style="width: 400px margin-left:120px"
                 size="small">
          <div class="pops">
            <div class="pops-normal">
              <el-form-item :label="$t('public.time') + ' :'"
                            prop="date">
                <el-radio-group v-model="listQuery.date">
                  <el-radio :label="1">月</el-radio>
                  <el-radio :label="2">周</el-radio>
                  <el-radio :label="3">季度</el-radio>
                  <el-radio :label="4">年</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="$t('operations.region') + ' :'">
                <el-checkbox v-model="checkAll"
                             @change="(data)=>{return handleCheckAllChange(data, 'districtsOptions', 'admin_region_id')}">不限</el-checkbox>
                <el-checkbox-group v-model="listQuery.admin_region_id"
                                   @change="(data)=>{return handleCheckedCitiesChange(data, 'districtsOptions', 'checkAll')}">
                  <el-checkbox v-for="(items, index) in districtsOptions"
                               :label="items.id"
                               :key="index">{{items.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item :label="$t('operations.name_2') + ' :'">
                <drop-down-select :data="itocOptions"
                                  :count="itocCount"
                                  :page-size="pageSize"
                                  :id="listQuery.itoc_id"
                                  :name="listQuery.itoc_name"
                                  @getList="(pageNumber, search)=>{return getItoc(pageNumber, search,'getItoc')}"
                                  @addList="(pageNumber, search)=>{return getItoc(pageNumber, search,'addItoc')}"
                                  @choose="(data)=>{return choose(data, 'itoc')}"
                                  @remove="(data)=>{return remove(data, 'itoc')}"></drop-down-select>
              </el-form-item>
              <el-form-item :label="$t('goods.sort') + ' :'">
                <el-checkbox v-model="equipmentCheckAll"
                             @change="(data)=>{return handleCheckAllChange(data, 'goodsSortOptions', 'category_id')}">不限</el-checkbox>
                <el-checkbox-group v-model="listQuery.category_id"
                                   @change="(data)=>{return handleCheckedCitiesChange(data, 'goodsSortOptions', 'equipmentCheckAll')}">
                  <el-checkbox v-for="(items, index) in goodsSortOptions"
                               :label="items.id"
                               :key="index">{{items.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item :label="$t('goods.name_1') + ' :'">
                <drop-down-select :data="goodsOptions"
                                  :count="goodsCount"
                                  :page-size="pageSize"
                                  :id="listQuery.category_id"
                                  :name="listQuery.category_name"
                                  @getList="(pageNumber, search)=>{return getGoods(pageNumber, search,'getGoods')}"
                                  @addList="(pageNumber, search)=>{return getGoods(pageNumber, search,'addGoods')}"
                                  @choose="(data)=>{return choose(data, 'goods')}"
                                  @remove="(data)=>{return remove(data, 'goods')}"></drop-down-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <div>
          </div>
          <div>
            <el-button @click="dialogFormVisible = false">{{
              $t("table.cancel")
            }}</el-button>
            <el-button type="primary"
                       :disabled="filterDisabled"
                       @click="filterData">{{ $t("table.confirm") }}</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import echarts from "echarts";
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      checkAll: false,
      circleCheckAll: false,
      equipmentCheckAll: false,
      showDateStyle: 1,
      listQuery: {
        page: 1,
        limit: 20,
        date: 1,
        category_id: [],
        merchant_circle_id: [],
        itoc_id: undefined,
        admin_region_id: []
      },
      itocOptions: [],
      itocCount: 0,
      circleOptions: [],
      districtsOptions: [],
      goodsSortOptions: [],
      goodsOptions: [],
      goodsCount: undefined,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        select: "筛选"
      },
      filterDisabled: false,
      pageSize: 20
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        date: this.listQuery.date ? this.listQuery.date : 1,
        category_id: this.listQuery.category_id.length > 0 ? this.listQuery.category_id.join(",") : "",
        goods_name: this.listQuery.goods_name ? this.listQuery.goods_name : "",
        itoc_id: this.listQuery.itoc_id ? this.listQuery.itoc_id : "",
        admin_region_id: this.listQuery.admin_region_id.length > 0 ? this.listQuery.admin_region_id.join(",") : "",
        type: 1
      };
      const path = {
        app: "goods",
        api: "api_goods_index_salesStat",
        version: "1.0",
        type: 2,
        data: data
      };
      console.log('JSON.stringify(path)', JSON.stringify(path))
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleSelect() {
      this.dialogStatus = "select";
      this.dialogFormVisible = true;
      // 获取七大区列表
      this.getDistricts();
      this.getEquipmentType();
    },
    // 筛选终端销售统计
    filterData() {
      if (!this.filterDisabled) {
        this.filterDisabled = true;
        this.getList();
        this.dialogFormVisible = false;
        this.showDateStyle = this.listQuery.date;
        setTimeout(() => {
          this.filterDisabled = false;
        }, 1000);
      }
    },
    // 多选
    handleCheckedCitiesChange(value, options, all) {
      let checkedCount = value.length;
      this[all] = checkedCount === this[options].length;
    },
    // 全选
    handleCheckAllChange(val, options, name) {
      let all = [];
      if (val) {
        const officers = this[options];
        all = officers.map(function(officer) {
          return officer.id
        });
      }
      this.listQuery[name] = all;
    },
    getDistricts() {
      // 获取七大区列表
      const path = {
        app: "archives",
        api: "api_archives_itoc_sevenRegional",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 商品类型列表
    getEquipmentType() {
      const path = {
        app: "archives",
        api: "api_archives_category_getList",
        version: "1.0",
        data: {
          type: 1
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 运营中心选择
    getItoc(pageNumber, search, name) {
      const path = {
        app: "archives",
        api: "api_archives_itoc_itocList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 商品分类选择
    getGoods(pageNumber, search, name) {
      const path = {
        app: "goods",
        api: "api_goods_index_getList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    choose(data, name) {
      if (name === 'itoc') {
        this.listQuery.itoc_id = data.id;
        this.listQuery.itoc_name = data.name;
      } else if (name === 'goods') {
        this.listQuery.goods_id = data.id;
        this.listQuery.goods_name = data.name;
      }
    },
    remove(data, name) {
      if (name === 'itoc') {
        this.listQuery.itoc_id = undefined;
        this.listQuery.itoc_name = "";
      } else if (name === 'goods') {
        this.listQuery.goods_id = undefined;
        this.listQuery.goods_name = "";
      }
    },
    drawChart(name, data, data2) {
      const option = {
        color: ['RGB(115,170,219)', 'RGB(47,85,151)'],
        legend: {
          data: ['销售额', '同比增长']
        },
        tooltip: {},
        xAxis: [
          {
            type: 'category',
            data: name
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: false,
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#E0E0E0',
                fontSize: 16
              }
            },
            // min: 0,
            // max: 500, // 设置左侧最大值
            axisLabel: {
              show: true,
              textStyle: {
                color: '#E0E0E0',
                fontSize: 16
              }
            },
            axisLine: {
              lineStyle: {
                color: '#E0E0E0',
                fontSize: 16
              }
            }
          },
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: true,
              lineStyle: {
                // type: 'dashed', // 虚线
                color: '#E0E0E0'
              }
            },
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: '#E0E0E0'
              }
            },
            axisLabel: {
              formatter: '{value}%', // 右侧以百分比进行展示
              show: true,
              textStyle: {
                color: '#E0E0E0',
                fontSize: 16
              }
            },
            textStyle: {
              color: '#E0E0E0',
              fontSize: 16
            }
            // boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: data
          },
          {
            name: '同比增长',
            type: 'bar',
            data: data2
          }
        ]
      };
      const salesChart = document.getElementById("sales-analysis");
      const myChartSales = echarts.init(salesChart);
      myChartSales.setOption(option);
      window.onresize = myChartSales.resize;
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            })
          } else if (resj.api === "api_goods_index_salesStat") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
            console.log('this.list', this.list)
            const name = [];
            let data = [0, 0, 0, 0, 0, 0, 0];
            for (let index = 0; index < 6; index++) {
              name.push(this.dateEs(this.showDateStyle, index))
            }

            resj.data.forEach(element => {
              data[6] += parseInt(element[6])
              data[5] += parseInt(element[5])
              data[4] += parseInt(element[4])
              data[3] += parseInt(element[3])
              data[2] += parseInt(element[2])
              data[1] += parseInt(element[1])
              data[0] += parseInt(element[0])
            });
            const data2 = [data[5] - data[6], data[4] - data[5], data[3] - data[4], data[2] - data[3], data[1] - data[2], data[0] - data[1]]
            this.drawChart(name.reverse(), data.slice(0, 6).reverse(), data2);
          } else if (resj.api === "api_archives_itoc_sevenRegional") {
            this.districtsOptions = resj.data;
          } else if (resj.api === "api_archives_itoc_itocList" && resj.type === "getItoc") {
            this.itocOptions = resj.data;
            this.itocCount = resj.count;
          } else if (resj.api === "api_archives_itoc_itocList" && resj.type === "addItoc") {
            this.itocOptions = this.itocOptions.concat(resj.data);
          } else if (resj.api === "api_archives_category_getList") {
            this.goodsSortOptions = resj.data;
          } else if (resj.api === "api_goods_index_getList" && resj.type === "getGoods") {
            this.goodsOptions = resj.data;
            this.goodsCount = resj.count;
          } else if (resj.api === "api_goods_index_getList" && resj.type === "addGoods") {
            this.goodsOptions = this.goodsOptions.concat(resj.data);
          }
        }
      }
    },
    // 显示时间格式
    showDate(data) {
      return this.dateEs(this.showDateStyle, data);
    }
  }
};
</script>
<style scoped>
#sales-analysis {
  width: 100%;
  height: 400px;
}
</style>
